<template>
  <div>
    <el-dialog :visible.sync="selectDialogVisible"
               title="请选择模板配置管理"
               width="80%" @close="closeDialog">
      <div style="padding-bottom: 50px;">
        <el-card class="filter-container" shadow="never">
          <div>
            <i class="el-icon-search"></i>
            <span>筛选搜索</span>
            <el-button
                size="small"
                style="float:right"
                type="primary"
                @click="handleSearchList()">
              查询搜索
            </el-button>
            <el-button
                size="small"
                style="float:right;margin-right: 15px"
                @click="handleResetSearch()">
              重置
            </el-button>
          </div>
          <div style="margin-top: 15px">
            <el-form :inline="true" :model="listQuery" label-width="auto" size="small">
              <el-form-item label="模板名称" prop="templateName">
                <el-input v-model="listQuery.templateName" clearable placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="作者" prop="author">
                <el-input v-model="listQuery.author" clearable placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="调用方式" prop="type">
                <el-select v-model="listQuery.type" clearable filterable style="width:100%">
                  <el-option label="本地模板" value="0"></el-option>
                  <el-option label="网络模板" value="1"></el-option>
                </el-select>
              </el-form-item>

            </el-form>
          </div>
        </el-card>

        <div class="table-container">
          <el-table v-loading="selectListLoading"
                    :data="selectList"
                    border style="width: 100%;">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-form class="demo-table-expand" inline label-position="left" label-suffix="："
                         style="background-color: #eeeeee4f">
                  <el-form-item label="描述: ">
                    <div style="white-space: pre-wrap;">{{ scope.row.desc }}</div>
                  </el-form-item>
                  <el-form-item v-if="scope.row.type === '1'" label="网络调用地址: ">
                    <div style="white-space: pre-wrap;">{{ scope.row.networkUrl }}</div>
                  </el-form-item>
                  <el-form-item label="使用指引: ">
                    <div style="white-space: pre-wrap;">{{ scope.row.guide }}</div>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column align="center" label="模板名称" prop="templateName" show-overflow-tooltip/>
            <el-table-column align="center" label="作者" prop="author" show-overflow-tooltip/>
            <el-table-column align="center" label="调用方式" prop="type">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.type == '0'" type="primary">本地模板</el-tag>
                <el-tag v-if="scope.row.type == '1'" type="success">网络模板</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="多数据源" prop="supportMutilDatasource">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.supportMutilDatasource == '0'" type="primary">不支持</el-tag>
                <el-tag v-if="scope.row.supportMutilDatasource == '1'" type="success">支持</el-tag>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleSelect(scope.row)">选择</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
              :current-page.sync="listQuery.current"
              :page-size="listQuery.pageSize"
              :page-sizes="[5,10,15]"
              :total="total"
              background
              layout="total, sizes,prev, pager, next,jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
          </el-pagination>
        </div>

      </div>
    </el-dialog>


  </div>
</template>

<script>
import {templateConfigPostRequire} from '@/api/templateConfig';

const defaultListQuery = {
  current: 1,
  pageSize: 10,
  type: undefined,
  templateName: undefined,
  author: undefined,
}
export default {
  components: {},
  name: "templateConfigSelect",
  props: {
    visible: {
      default: false
    }
  },
  data() {
    return {
      selectList: [],
      total: null,
      selectListLoading: false,
      selectDialogVisible: false,
      listQuery: this.$deepClone(defaultListQuery),
    }
  },
  watch: {
    visible(val) {
      this.selectDialogVisible = val
      if (val) {
        this.getList()
      }
    }
  },
  methods: {

    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    getList() {
      this.selectListLoading = true
      templateConfigPostRequire('listPage', this.listQuery).then(response => {
        this.selectListLoading = false
        this.selectList = response.data.records
        this.total = response.data.total
      })
    },
    handleResetSearch() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    closeDialog() {
      this.selectDialogVisible = false
      this.$emit('close')
    },
    handleSelect(row) {
      this.$emit("onSelect", row)
      this.closeDialog()
    }
  }
}
</script>
<style>
.demo-table-expand label {
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 10px;
  width: 100%;
}
</style>
